<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <link rel="stylesheet" href="./iconfont/iconfont.css" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + React + TS</title>
  </head>
  <body>
    <div id="root">
      <style>
        html,
        body,
        #root {
          position: relative;
          display: flex;
          align-items: center;
          justify-content: center;
          flex-direction: column;
          width: 100%;
          height: 90%;
          overflow: hidden;
        }

        .balls {
          width: 5em;
          display: flex;
          flex-flow: row nowrap;
          align-items: center;
          justify-content: space-between;
        }

        .balls div:nth-of-type(1) {
          width: 0.8em;
          height: 0.8em;
          border-radius: 50%;
          background-color: #1e80ff;
        }
        .balls div:nth-of-type(2) {
          width: 0.8em;
          height: 0.8em;
          border-radius: 50%;
          background-color: #006dfc;
        }
        .balls div:nth-of-type(3) {
          width: 0.8em;
          height: 0.8em;
          border-radius: 50%;
          background-color: #60a5ff;
        }

        .balls div:nth-of-type(1) {
          transform: translateX(-100%);
          animation: left-swing 0.5s ease-in alternate infinite;
        }

        .balls div:nth-of-type(3) {
          transform: translateX(-95%);
          animation: right-swing 0.5s ease-out alternate infinite;
        }

        @keyframes left-swing {
          50%,
          100% {
            transform: translateX(95%);
          }
        }

        @keyframes right-swing {
          50% {
            transform: translateX(-95%);
          }
          100% {
            transform: translateX(100%);
          }
        }

        .logo {
          width: 120px;
          height: 25px;
          margin-top: 20px;
          margin-left: -20px;
          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
        }
      </style>
      <div class="balls">
        <div></div>
        <div></div>
        <div></div>
      </div>
      <div class="logo">
        <img
          src="https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/e08da34488b114bd4c665ba2fa520a31.svg"
          alt=""
        />
      </div>
    </div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>
